<template>
	<view class="allcar">
		<carHeader :title="'选择车辆'"></carHeader>
		<view class="backcolor" v-for="(item,index) in carList" key="index">
			<view class="frist">
				<image :src="item.path" mode="" />
				<text class="t1">车型: {{item.carType}}</text>
				<text class="t2">车牌: {{item.carNum}}</text>
				<label class="radio">
					<radio value="r2" />
				</label>
			</view>
		</view>
		<view class="xuanze">
			<button type="primary">
				<image src="/static/车联网服务-01专业洗车-07洗车-选择车辆_slices/加号@2x.png" mode="" />
				添加车辆
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carList: [{
						carType: "小米SU7",
						carNum: "豫M35468",
						path: "/static/车联网服务-01专业洗车-07洗车-选择车辆_slices/su7-01.jpg"
					},
					{
						carType: "小米SU7",
						carNum: "豫M35468",
						path: "/static/车联网服务-01专业洗车-07洗车-选择车辆_slices/su7-01.jpg"
					}
				]
			}
		},
		methods: {}
	}
</script>

<style lang="scss">
	.allcar {
		background-color: whitesmoke;
		height: 1205rpx;
		position: relative;
	}

	.backcolor {
		height: 200rpx;
		position: relative;
		top: -250rpx;
		margin-bottom: 50rpx;

		.frist {
			width: 93%;
			height: 200rpx;
			background-color: white;
			border: 3rpx solid white;
			border-radius: 30rpx;
			position: absolute;
			top: 60rpx;
			left: 25rpx;

			image {
				position: absolute;
				width: 150rpx;
				height: 150rpx;
				border-radius: 75rpx;
				top: 25rpx;
				left: 25rpx;
			}

			.t1 {
				position: absolute;
				left: 220rpx;
				top: 55rpx;
				font-size: 30rpx;
			}

			.t2 {
				position: absolute;
				left: 220rpx;
				top: 100rpx;
			}

			.radio {
				position: absolute;
				right: 30rpx;
				top: 70rpx;
			}
		}
	}

	.two {
		width: 93%;
		height: 200rpx;
		background-color: white;
		border: 3rpx solid white;
		border-radius: 30rpx;
		position: relative;
		margin: 0 auto;
		margin-top: 90rpx;

		image {
			position: absolute;
			width: 150rpx;
			height: 150rpx;
			border-radius: 75rpx;
			top: 25rpx;
			left: 25rpx;
		}

		.t1 {
			position: absolute;
			left: 220rpx;
			top: 55rpx;
		}

		.t2 {
			position: absolute;
			left: 220rpx;
			top: 100rpx;
		}

		.radio {
			position: absolute;
			right: 30rpx;
			top: 70rpx;
		}
	}

	.xuanze {
		position: absolute;
		bottom: 0rpx;
		width: 100%;
		height: 120rpx;
		background-color: white;

		button {
			background-color: #3681F6;
			margin: 30rpx auto;
			width: 85%;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 40rpx;
			color: white;
			line-height: 70rpx;

			image {
				// background-color: white;
				position: absolute;
				width: 50rpx;
				height: 50rpx;
				top: 9rpx;

				left: 170rpx;

			}
		}
	}
</style>